<!-- 开展 -->
<template>
  <img v-if="isTitle" src="@/assets/xinshuoImages/line.png" alt="" style="width: 100%" />
  <div ref="tabStartWork" class="box">
    <div class="seq">
      <div class="line1"></div>
      <div class="txt">开展作业</div>
      <div class="line2"></div>
    </div>
    <div class="center">
      <!--  1-->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">01</p>
            </div>
            <TitleAndLogo
              title="检修机构内部"
              img-url1="AI.png"
              style="width: 175px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="videoBox">
            <video src="http://10.1.6.42:81/film/DstartWork.mp4" class="video" muted autoplay controls loop></video>
            <!-- 定位状态 -->
            <div class="fixStatus">
              <div v-for="item in statusArr.status1" :key="item" class="oneStatus">
                <TitleAndstatus :title="item" />
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox" style="height: 404px">
          <!-- 播报情况 -->
          <titleAndBcg item="作业要求与控制措施播报完整" style="margin-top: 25px; margin-bottom: 20px" />
          <el-table
            ref="table"
            class="hd-table"
            :data="tableData1"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#EEF5FF',
              textAlign: 'center',
              color: '#111',
            }"
          >
            <el-table-column prop="seq" label="序号" />
            <el-table-column prop="work" label="作业要求" width="448px" />
            <el-table-column prop="receiveStatus" label="接收状态">
              <template #default>
                <div class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 2-3-->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">02</p>
            </div>
            <TitleAndLogo
              title="检修箱盒内部"
              img-url1="toTxt.png"
              style="width: 175px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <!-- 播报情况 -->
          <titleAndBcg item="作业要求与控制措施播报完整" style="margin-top: 25px; margin-bottom: 20px" />
          <el-table
            ref="table"
            class="hd-table"
            :data="tableData2"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#EEF5FF',
              textAlign: 'center',
              color: '#111',
            }"
          >
            <el-table-column prop="seq" label="序号" />
            <el-table-column prop="work" label="作业要求" width="448px" />
            <el-table-column prop="receiveStatus" label="接收状态">
              <template #default>
                <div class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">03</p>
            </div>
            <TitleAndLogo
              title="清扫机构、箱盒内部"
              img-url1="toTxt.png"
              style="width: 223px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <!-- 播报情况 -->
          <titleAndBcg item="作业要求与控制措施播报完整" style="margin-top: 25px; margin-bottom: 20px" />
          <el-table
            ref="table1"
            class="hd-table"
            :data="tableData3"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#EEF5FF',
              textAlign: 'center',
              color: '#111',
            }"
          >
            <el-table-column prop="seq" label="序号" />
            <el-table-column prop="work" label="作业要求" width="448px" />
            <el-table-column prop="receiveStatus" label="接收状态">
              <template #default>
                <div class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 4-5-->
      <div class="oneCenter">
        <div class="leftBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">04</p>
            </div>
            <TitleAndLogo
              title="测试电气特性"
              img-url1="toTxt.png"
              style="width: 175px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <!-- 播报情况 -->
          <titleAndBcg item="作业要求播报完整" style="margin-top: 25px; margin-bottom: 20px" />
          <el-table
            ref="table"
            class="hd-table"
            :data="tableData4"
            border
            style="width: 100%"
            :header-cell-style="{
              background: '#EEF5FF',
              textAlign: 'center',
              color: '#111',
            }"
          >
            <el-table-column prop="seq" label="序号" />
            <el-table-column prop="work" label="作业要求" width="448px" />
            <el-table-column prop="receiveStatus" label="接收状态">
              <template #default>
                <div class="success">
                  <img src="@/assets/xinshuoImages/greenStatus1.png" alt="" />
                  <p>收到</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="rightBox">
          <div class="BoxTop">
            <div class="seqLogo">
              <img src="@/assets/xinshuoImages/step.png" alt="" class="step" />
              <p class="txt">05</p>
            </div>
            <TitleAndLogo
              :show-two="true"
              title="试验销记"
              img-url1="toTxt.png"
              img-url2="PDA.png"
              style="width: 172px; font-size: 16px; margin-bottom: 18px"
            />
          </div>
          <div class="gangguiBox">
            <titleAndBcg v-for="item in checkList" :key="item" :item="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import urls from '@/utils/url'
let props = defineProps({
  isTitle: {
    type: Boolean,
    default: true,
  },
})

let checkList = reactive(['加锁，室内外设备状态核对显示一致', '销记完毕，恢复正常使用'])
//1
const tableData1 = reactive([
  { seq: 1, work: '确认机构、机柱、梯子外观完好，梯子地线连接紧固' },
  {
    seq: 2,
    work: '梯子、机构、机柱各部螺丝紧固，遮掩、蛇管安装良好，机构开口销开口范围60°～90°，活动部位油润良好',
  },
  { seq: 3, work: '机构内部发光盘固定良好，配线套管齐全、绑扎整齐、无破皮' },
  { seq: 4, work: '端子螺丝紧固、螺母垫片齐全，线缆引入孔防护良好' },
  { seq: 5, work: '“天窗”内检修应将微机监测设为“天窗”状态' },
])
let statusArr = reactive({
  status1: ['安全带佩戴正常'],
})
// 2
const tableData2 = reactive([
  {
    seq: 1,
    work: '点灯装置底座、点灯单元、报警分机安装牢固',
  },
  {
    seq: 2,
    work: '内部线缆套管齐全、绑扎整齐、无破皮、图标图物一致，接线端子紧固、螺母垫片齐全',
  },
  {
    seq: 3,
    work: '线缆引入孔防护良好、无废孔，灌胶无龟裂，电缆无下沉',
  },
  {
    seq: 4,
    work: '桥梁上作业，有车通过时，应提10分钟前进入避车台躲避列车，不得在桥梁扶手边待避',
  },
])
// 3
const tableData3 = reactive([
  {
    seq: 1,
    work: '机构、箱盒盘根作用良好，内部清洁，防尘、防水良好',
  },
  {
    seq: 2,
    work: '有6级以上强风、大到暴雨、中到大雪、雾霾、沙尘暴天气能见度不足时，应立即停止作业',
  },
])
// 4
const tableData4 = reactive([
  {
    seq: 1,
    work: 'LED信号机点灯单元输入电压：AC103±6%V',
  },
  {
    seq: 2,
    work: '点灯单元输出电压：DC46V±2V',
  },
  {
    seq: 3,
    work: '灯端电压(额定值)：DC46±2V',
  },
  {
    seq: 4,
    work: '灯丝报警试验良好，室内外报警一致',
  },
])
const table = ref()
// 设置定时器
let timers
const scrollUp = (tableRef) => {
  const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
  const tableScroll = ref(true)
  demo.addEventListener('mouseover', () => {
    tableScroll.value = false
  })
  demo.addEventListener('mouseout', () => {
    tableScroll.value = true
  })
  timers = setInterval(() => {
    // if (tableScroll.value) {
    demo.scrollTop += 1
    if (demo.clientHeight + demo.scrollTop >= demo.scrollHeight - 5) {
      demo.scrollTop = 0
    }
    // }
  }, 60)
}
const table1 = ref()
// 设置定时器
let timers1
const scrollUp1 = (tableRef) => {
  const demo = tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
  const tableScroll = ref(true)
  demo.addEventListener('mouseover', () => {
    tableScroll.value = false
  })
  demo.addEventListener('mouseout', () => {
    tableScroll.value = true
  })
  timers1 = setInterval(() => {
    // if (tableScroll.value) {
    demo.scrollTop += 1
    if (demo.clientHeight + demo.scrollTop >= demo.scrollHeight - 5) {
      demo.scrollTop = 0
    }
    // }
  }, 60)
}
// el-tabs中间滚动
let tabStartWork = ref()
let tableScroll = ref(true)

onMounted(() => {
  nextTick(() => {
    scrollUp(table.value)
    scrollUp1(table1.value)
  })
})

onBeforeUnmount(() => {
  clearInterval(timers) // 销毁定时器
  clearInterval(timers1) // 销毁定时器
})

defineExpose({
  tabStartWork,
  tableScroll,
})
</script>

<style lang="scss" scoped>
@import '@/styles/centerStyle.scss';
.box {
  // overflow-y: auto;
  // overflow-x: hidden;
  display: flex;
  margin-top: 20px;
  height: 100% !important;
}
.seq {
  // height: 3732px !important;
  .line2 {
    height: 53% !important;
  }
}
.center {
  flex-wrap: wrap;
}
.hd-table {
  text-align: center;
}

.gangguiBox {
  margin-top: 26px;
  width: 100%;
  height: 281px;
  background: rgba(245, 245, 245, 0.5);
  padding: 85px 75px 86px 94px;
}
// 视频上定位表格
.fixTable {
  text-align: center;
  font-size: 16px;
  font-family:
    Source Han Sans CN-Regular,
    Source Han Sans CN;
  font-weight: 400;
  color: #fff;
  line-height: 23px;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: auto;
  height: 56px;
  background: rgba(0, 0, 0, 0.4);
}
.success {
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    color: #00be1b;
    margin-left: 7px;
  }
}
.WorkModel {
  position: absolute;
  bottom: 0;
  right: 0;
}
// el-table
:deep(.el-table) {
  font-size: 16px !important;
}

// 15-16
.rightBox {
  .rightTxt {
    margin-top: 94px;
    font-size: 22px;
    font-family:
      Source Han Sans CN-Medium,
      Source Han Sans CN;
    font-weight: 500;
    color: #111111;
    line-height: 32px;
    margin-bottom: 30px;
  }
  .checkPdf {
    width: 549px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 157px;
    padding: 20px 19px 20px 30px;
    background: url('@/assets/xinshuoImages/checkTest.png') no-repeat center/100% 100%;
    .left {
      display: flex;
      align-items: center;
      > p {
        font-size: 24px;
        font-family:
          Source Han Sans CN-Regular,
          Source Han Sans CN;
        font-weight: 400;
        color: #111111;
        margin-left: 23px;
      }
    }
    .check {
      width: 84px;
      height: 40px;
      background: url('@/assets/xinshuoImages/checkRound.png') no-repeat center/100% 100%;
      font-size: 16px;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
